<!DOCTYPE html
    PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">

<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>轮播图无缝滚动</title>
    <style type="text/css">
        * {
            padding: 0;
            margin: 0;
            list-style: none;
            border: 0;
        }

        .all {
            width: 500px;
            height: 200px;
            padding: 7px;
            border: 1px solid #ccc;
            margin: 100px auto;
            position: relative;
        }

        .screen {
            width: 500px;
            height: 200px;
            overflow: hidden;
            position: relative;
        }

        .screen li {
            width: 500px;
            height: 200px;
            overflow: hidden;
            float: left;
        }

        .screen ul {
            position: absolute;
            left: 0;
            top: 0px;
            width: 3000px;
        }

        .all ol {
            position: absolute;
            right: 10px;
            bottom: 10px;
            line-height: 20px;
            text-align: center;
        }

        .all ol li {
            float: left;
            width: 20px;
            height: 20px;
            background: #fff;
            border: 1px solid #ccc;
            margin-left: 10px;
            cursor: pointer;
        }

        .all ol li.current {
            background: yellow;
        }

        /*#arr {display: none;}*/
        #arr span {
            width: 40px;
            height: 40px;
            position: absolute;
            left: 5px;
            top: 50%;
            margin-top: -20px;
            background: #000;
            cursor: pointer;
            line-height: 40px;
            text-align: center;
            font-weight: bold;
            font-family: '黑体';
            font-size: 30px;
            color: #fff;
            opacity: 0.3;
            border: 1px solid #fff;
        }

        #arr #right {
            right: 5px;
            left: auto;
        }
    </style>



</head>


<body>
    <div class="all" id='all'>
        <div class="screen" id="screen">
            <ul id="ul">
                <li><img src="../image/0.jpg" width="500" height="200" /></li>
                <li><img src="../image/1.jpg" width="500" height="200" /></li>
                <li><img src="../image/2.jpg" width="500" height="200" /></li>
                <li><img src="../image/3.jpeg" width="500" height="200" /></li>
                <li><img src="../image/4.jpg" width="500" height="200" /></li>
                <li><img src="../image/5.jpg" width="500" height="200" /></li>
            </ul>
            <ol></ol>
            <div id="arr">
                <span id="left"><</span>
                <span id="right">></span>
            </div>
        </div>
    </div>
</body>

</html>
<script>
    //需求：无缝轮播图
    //步骤：
    //1.老三步。获取相关元素。
    //2.补齐相互盒子
    //1.复制第一张图片所在的li，填入所在的ul中。
    //2.生成相关的ol中的li。
    //3.点亮第一个ol中的li。
    //3.鼠标放到小方块儿上，轮播图片。
    //4.添加定时器。
    //5.左右切换的按钮。






    //1.老三步。获取相关元素。
    var box = document.getElementById("all");
    var ul = box.children[0].children[0];
    var ol = box.children[0].children[1];
    var ulLiArr = ul.children;
    //2.补齐相互盒子
    //1.复制第一张图片所在的li，填入所在的ul中。
    var newLi = ulLiArr[0].cloneNode(true);
    ul.appendChild(newLi);
    //2.生成相关的ol中的li。
    for (var i = 0; i < ulLiArr.length - 1; i++) {
        var newOlLi = document.createElement("li");
        newOlLi.innerHTML = i + 1;
        ol.appendChild(newOlLi);
    }
    //3.点亮第一个ol中的li。
    var olLiArr = ol.children;
    ol.children[0].className = "current";
    //3.鼠标放到小方块儿上，轮播图片。
    for (var i = 0; i < olLiArr.length; i++) {
        olLiArr[i].index = i;
        olLiArr[i].onmouseover = function () {
            for (var j = 0; j < olLiArr.length; j++) {
                olLiArr[j].className = "";
            }
            olLiArr[this.index].className = "current";
            animate(ul, -this.index * ul.children[0].offsetWidth);
            key = square = this.index;
        }
    }
    //4.添加定时器。
    var timer = null;
    var key = 0;
    var square = 0;
    timer = setInterval(autoPlay, 1000);


    function autoPlay() {
        key++;
        square++;
        if (key > olLiArr.length) {
            key = 1;
            ul.style.left = 0;
        }
        animate(ul, -key * ul.children[0].offsetWidth);


        square = square > olLiArr.length - 1 ? 0 : square;
        for (var j = 0; j < olLiArr.length; j++) {
            olLiArr[j].className = "";
        }
        olLiArr[square].className = "current";
    }
    //5.鼠标移开开启定时器，鼠标放上去开启定时器。
    box.onmouseover = function () {
        clearInterval(timer);
    }
    box.onmouseout = function () {
        timer = setInterval(autoPlay, 1000);
    }
    //6.左右切换的按钮。
    var btnArr = box.children[0].children[2].children;
    btnArr[0].onclick = function () {
        key--;
        square--;
        if (key < 0) {
            key = 4;
            ul.style.left = -5 * ul.children[0].offsetWidth + "px";
        }
        animate(ul, -key * ul.children[0].offsetWidth);


        square = square < 0 ? olLiArr.length - 1 : square;
        for (var j = 0; j < olLiArr.length; j++) {
            olLiArr[j].className = "";
        }
        olLiArr[square].className = "current";
    }
    btnArr[1].onclick = function () {
        autoPlay();
    }








    //  基本封装
    function animate(obj, target) {
        clearInterval(obj.timer);
        var speed = obj.offsetLeft < target ? 15 : -15;
        obj.timer = setInterval(function () {
            var result = target - obj.offsetLeft;
            obj.style.left = obj.offsetLeft + speed + "px";
            if (Math.abs(result) <= 15) {
                obj.style.left = target + "px";
                clearInterval(obj.timer);
            }
        }, 10);
    }




</script>